<template>
  <div class="forms-ide" :class="{ edit }">
    <div class="item">
      <div
        class="type main"
        :class="{
          min: forms.chef_hero && herosNameById(forms.chef_hero).length > 4,
        }"
      >
        <template v-if="!forms.chef_hero">
          <span>主</span><span>将</span>
        </template>
        <template v-else>
          <span v-for="item in herosNameById(forms.chef_hero)" :key="item">
            {{ item }}
          </span>
        </template>
      </div>
      <div
        class="heroes"
        :class="{
          select: value === 'chef_hero',
          no_own:
            forms.chef_hero && own && owns.indexOf(forms.chef_hero) === -1,
        }"
        @click="setSelect('chef_hero')"
      >
        <heroe-headimg
          v-if="forms.chef_hero"
          auto
          :heroeId="forms.chef_hero"
          :click="!edit"
        ></heroe-headimg>
        <div class="add" v-else>+</div>
      </div>
      <div class="cont">
        <div class="tactics-list">
          <img
            src="../../../../assets/tactics.svg"
            onload="SVGInject(this)"
            class="icon"
          />
          <div
            class="tactic"
            @click="showTactic('chef_hero')"
            :class="{ ok: mainTacticName(forms.chef_hero) }"
          >
            {{ mainTacticName(forms.chef_hero) || "主战法" }}
          </div>
          <div
            class="tactic"
            @click="setSelect('chef_tactic_one')"
            :class="{
              select: value === 'chef_tactic_one',
              ok: tacticName(forms.chef_tactic_one),
            }"
          >
            {{ tacticName(forms.chef_tactic_one) || (edit ? "+" : "-") }}
          </div>
          <div
            class="tactic"
            @click="setSelect('chef_tactic_two')"
            :class="{
              select: value === 'chef_tactic_two',
              ok: tacticName(forms.chef_tactic_two),
            }"
          >
            {{ tacticName(forms.chef_tactic_two) || (edit ? "+" : "-") }}
          </div>
        </div>
        <div class="books-list">
          <img
            src="../../../../assets/book.svg"
            onload="SVGInject(this)"
            class="icon"
          />
          <div
            class="book"
            @click="setSelect('chef_book_one')"
            :class="{
              select: value === 'chef_book_one',
              ok: bookName(forms.chef_book_one),
            }"
          >
            {{ bookName(forms.chef_book_one) || (edit ? "+" : "-") }}
          </div>

          <div
            class="book"
            @click="setSelect('chef_book_two')"
            :class="{
              select: value === 'chef_book_two',
              ok: bookName(forms.chef_book_two),
            }"
          >
            {{ bookName(forms.chef_book_two) || (edit ? "+" : "-") }}
          </div>

          <div
            class="book"
            @click="setSelect('chef_book_three')"
            :class="{
              select: value === 'chef_book_three',
              ok: bookName(forms.chef_book_three),
            }"
          >
            {{ bookName(forms.chef_book_three) || (edit ? "+" : "-") }}
          </div>
        </div>
      </div>
    </div>
    <div class="item">
      <!-- <div class="type"><span>副</span><span>将</span></div> -->
      <div
        class="type"
        :class="{
          min:
            forms.sub_hero_one && herosNameById(forms.sub_hero_one).length > 4,
        }"
      >
        <template v-if="!forms.sub_hero_one">
          <span>副</span><span>将</span>
        </template>
        <template v-else>
          <span v-for="item in herosNameById(forms.sub_hero_one)" :key="item">
            {{ item }}
          </span>
        </template>
      </div>

      <div
        class="heroes"
        :class="{
          select: value === 'sub_hero_one',
          no_own:
            forms.sub_hero_one &&
            own &&
            owns.indexOf(forms.sub_hero_one) === -1,
        }"
        @click="setSelect('sub_hero_one')"
      >
        <heroe-headimg
          auto
          v-if="forms.sub_hero_one"
          :heroeId="forms.sub_hero_one"
          :click="!edit"
        ></heroe-headimg>
        <div class="add" v-else>+</div>
      </div>
      <div class="cont">
        <div class="tactics-list">
          <img
            src="../../../../assets/tactics.svg"
            onload="SVGInject(this)"
            class="icon"
          />
          <div
            class="tactic"
            @click="showTactic('sub_hero_one')"
            :class="{ ok: mainTacticName(forms.sub_hero_one) }"
          >
            {{ mainTacticName(forms.sub_hero_one) || "主战法" }}
          </div>
          <div
            class="tactic"
            @click="setSelect('sub_one_tactic_one')"
            :class="{
              select: value === 'sub_one_tactic_one',
              ok: tacticName(forms.sub_one_tactic_one),
            }"
          >
            {{ tacticName(forms.sub_one_tactic_one) || (edit ? "+" : "-") }}
          </div>
          <div
            class="tactic"
            @click="setSelect('sub_one_tactic_two')"
            :class="{
              select: value === 'sub_one_tactic_two',
              ok: tacticName(forms.sub_one_tactic_two),
            }"
          >
            {{ tacticName(forms.sub_one_tactic_two) || (edit ? "+" : "-") }}
          </div>
        </div>
        <div class="books-list">
          <img
            src="../../../../assets/book.svg"
            onload="SVGInject(this)"
            class="icon"
          />
          <div
            class="book"
            @click="setSelect('sub_one_book_one')"
            :class="{
              select: value === 'sub_one_book_one',
              ok: bookName(forms.sub_one_book_one),
            }"
          >
            {{ bookName(forms.sub_one_book_one) || (edit ? "+" : "-") }}
          </div>

          <div
            class="book"
            @click="setSelect('sub_one_book_two')"
            :class="{
              select: value === 'sub_one_book_two',
              ok: bookName(forms.sub_one_book_two),
            }"
          >
            {{ bookName(forms.sub_one_book_two) || (edit ? "+" : "-") }}
          </div>

          <div
            class="book"
            @click="setSelect('sub_one_book_three')"
            :class="{
              select: value === 'sub_one_book_three',
              ok: bookName(forms.sub_one_book_three),
            }"
          >
            {{ bookName(forms.sub_one_book_three) || (edit ? "+" : "-") }}
          </div>
        </div>
      </div>
    </div>
    <div class="item">
      <div
        class="type"
        :class="{
          min:
            forms.sub_hero_two && herosNameById(forms.sub_hero_two).length > 4,
        }"
      >
        <template v-if="!forms.sub_hero_two">
          <span>副</span><span>将</span>
        </template>
        <template v-else>
          <span v-for="item in herosNameById(forms.sub_hero_two)" :key="item">
            {{ item }}
          </span>
        </template>
      </div>
      <div
        class="heroes"
        :class="{
          select: value === 'sub_hero_two',
          no_own:
            forms.sub_hero_two &&
            own &&
            owns.indexOf(forms.sub_hero_two) === -1,
        }"
        @click="setSelect('sub_hero_two')"
      >
        <heroe-headimg
          auto
          v-if="forms.sub_hero_two"
          :heroeId="forms.sub_hero_two"
          :click="!edit"
        ></heroe-headimg>
        <div class="add" v-else>+</div>
      </div>
      <div class="cont">
        <div class="tactics-list">
          <img
            src="../../../../assets/tactics.svg"
            onload="SVGInject(this)"
            class="icon"
          />
          <div
            class="tactic"
            @click="showTactic('sub_hero_two')"
            :class="{ ok: mainTacticName(forms.sub_hero_two) }"
          >
            {{ mainTacticName(forms.sub_hero_two) || "主战法" }}
          </div>
          <div
            class="tactic"
            @click="setSelect('sub_two_tactic_one')"
            :class="{
              select: value === 'sub_two_tactic_one',
              ok: tacticName(forms.sub_two_tactic_one),
            }"
          >
            {{ tacticName(forms.sub_two_tactic_one) || (edit ? "+" : "-") }}
          </div>
          <div
            class="tactic"
            @click="setSelect('sub_two_tactic_two')"
            :class="{
              select: value === 'sub_two_tactic_two',
              ok: tacticName(forms.sub_two_tactic_two),
            }"
          >
            {{ tacticName(forms.sub_two_tactic_two) || (edit ? "+" : "-") }}
          </div>
        </div>
        <div class="books-list">
          <img
            src="../../../../assets/book.svg"
            onload="SVGInject(this)"
            class="icon"
          />
          <div
            class="book"
            @click="setSelect('sub_two_book_one')"
            :class="{
              select: value === 'sub_two_book_one',
              ok: bookName(forms.sub_two_book_one),
            }"
          >
            {{ bookName(forms.sub_two_book_one) || (edit ? "+" : "-") }}
          </div>
          <div
            class="book"
            @click="setSelect('sub_two_book_two')"
            :class="{
              select: value === 'sub_two_book_two',
              ok: bookName(forms.sub_two_book_two),
            }"
          >
            {{ bookName(forms.sub_two_book_two) || (edit ? "+" : "-") }}
          </div>
          <div
            class="book"
            @click="setSelect('sub_two_book_three')"
            :class="{
              select: value === 'sub_two_book_three',
              ok: bookName(forms.sub_two_book_three),
            }"
          >
            {{ bookName(forms.sub_two_book_three) || (edit ? "+" : "-") }}
          </div>
        </div>
      </div>
    </div>
    <textarea
      v-if="edit"
      @focus="setSelect('')"
      v-model="forms.name"
      placeholder="描述你的搭配思路，140字以内"
      maxlength="140"
    ></textarea>
  </div>
</template>

<script>
import { mapState } from "vuex";
import HeroeHeadimg from "@/components/HeroeHeadimg/HeroeHeadimg.vue";
export default {
  name: "MyHeroe",
  props: {
    value: String, // 阵容数据
    forms: Object, // 阵容数据
    current: String, // 当前正在填充位置
    edit: {
      type: Boolean,
      default: () => true,
    },
    own: {
      type: Boolean,
      default: () => false,
    },
  },
  model: {
    prop: "value",
    event: "change",
  },
  components: {
    HeroeHeadimg,
  },
  computed: {
    ...mapState("data", [
      "heroesList",
      "tacticsList",
      "booksList",
      "userHeroes",
    ]),
  },
  data() {
    return {
      owns: [],
    };
  },
  created() {
    this.owns = [...this.userHeroes];
    let a = { ids: [], is: false };
    let b = { ids: [], is: false };
    let c = { ids: [], is: false };
    this.heroesList.forEach((item) => {
      if (item.quality === 3 && !a.is) {
        a.ids.push(item.id);
        if (this.owns.indexOf(item.id) !== -1) a.is = true;
      } else if (item.quality === 2 && !b.is) {
        b.ids.push(item.id);
        if (this.owns.indexOf(item.id) !== -1) b.is = true;
      } else if (item.quality === 1 && !c.is) {
        c.ids.push(item.id);
        if (this.owns.indexOf(item.id) !== -1) c.is = true;
      }
    });
    if (!a.is) this.owns.push(...a.ids);
    if (!b.is) this.owns.push(...b.ids);
    if (!c.is) this.owns.push(...c.ids);
  },
  methods: {
    herosNameById(id) {
      let data;
      this.heroesList.some((item) => {
        if (item.id === id) data = item;
        return !!data;
      });
      return data.name.split("");
    },
    herosById(id) {
      let data;
      this.heroesList.some((item) => {
        if (item.id === id) data = item;
        return !!data;
      });
      return data;
    },
    tacticById(id) {
      if (!id) return null;
      let tactic = null;
      this.tacticsList.some((item) => {
        if (id == item.id) tactic = item;
        return !!tactic;
      });
      return tactic;
    },
    tacticName(id) {
      if (!id) return null;
      let tactic = null;
      this.tacticsList.some((item) => {
        if (id == item.id) tactic = item;
        return !!tactic;
      });
      return tactic ? tactic.name : null;
    },
    bookById(id) {
      if (!id) return null;
      let book = null;
      this.booksList.some((item) => {
        if (id == item.id) book = item;
        return !!book;
      });
      return book;
    },
    bookName(id) {
      if (!id) return null;
      let book = null;
      this.booksList.some((item) => {
        if (id == item.id) book = item;
        return !!book;
      });
      return book ? book.name : null;
    },
    mainTacticName(id) {
      if (!id) return null;
      let heroe = null;
      this.heroesList.some((item) => {
        if (id == item.id) heroe = item;
        return !!heroe;
      });
      return heroe ? this.tacticName(heroe.born_tactic_ids[0]) : null;
    },
    setSelect(type) {
      if (this.edit) {
        if (type.indexOf("book") !== -1) {
          if (type.indexOf("chef_book") !== -1) {
            if (!this.forms.chef_book_one && type !== "chef_book_one") {
              return this.$toast("请先选择前面的兵书");
            }
          } else if (type.indexOf("sub_one_book") !== -1) {
            if (!this.forms.sub_one_book_one && type !== "sub_one_book_one") {
              return this.$toast("请先选择前面的兵书");
            }
          } else if (type.indexOf("sub_two_book") !== -1) {
            if (!this.forms.sub_two_book_one && type !== "sub_two_book_one") {
              return this.$toast("请先选择前面的兵书");
            }
          }
        }
        this.$emit("change", type);
      } else {
        //  判断是兵书还是战法
        if (type.indexOf("book") !== -1) {
          let book = this.bookById(this.forms[type]);
          book && this.Popups.Book().show(book);
        } else if (type.indexOf("tactic") !== -1) {
          let tactic = this.tacticById(this.forms[type]);
          tactic &&
            this.Popups.Tactic().show(tactic, (path) => {
              this.$router.push(path);
            });
        }
      }
    },
    showTactic(type) {
      if (this.edit) return;
      let heros = this.herosById(this.forms[type]);
      let tactic = this.tacticById(heros.born_tactic_ids[0]);
      tactic &&
        this.Popups.Tactic().show(tactic, (path) => {
          this.$router.push(path);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.forms-ide {
  background: #f2f2f2;
  border-radius: 5px;
  font-size: 0.12rem;
  &.edit {
    padding: 0.11rem 0.13rem;
  }
  .item {
    display: flex;
    margin-bottom: 0.12rem;
    .type {
      width: 0.24rem;
      height: 0.53rem;
      background: #9e948a;
      border-radius: 4px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-evenly;
      color: #ffffff;
      margin-right: 0.05rem;
      &.main {
        background: #e29e65;
      }
      &.min {
        span {
          transform: scale(0.7);
          line-height: calc(0.12rem * 0.7);
        }
      }
      span {
        font-size: 0.12rem;
        line-height: 0.12rem;
      }
    }
    .select {
      border: 1px solid #ff8a69;
    }
    .heroes {
      width: 0.53rem;
      height: 0.53rem;
      margin-right: 0.35rem;
      background: #ffffff;
      border-radius: 4px;
      box-sizing: border-box;
      position: relative;
      &.no_own {
        &::before {
          pointer-events: none;
          display: block;
          content: "";
          position: absolute;
          top: 2px;
          left: 2px;
          bottom: 2px;
          right: 2px;
          background-color: rgba(0, 0, 0, 0.5);
          z-index: 3;
          border-radius: 0.05rem;
          background-image: url(../../../../assets/que.png);
          background-size: 0.28rem 0.28rem;
          background-position: center;
          background-repeat: no-repeat;
        }
      }
      .add {
        width: 100%;
        height: 100%;
        color: #cccccc;
        font-size: 0.24rem;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: 400;
      }
    }
    .cont {
      flex: 1;
      width: 0;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .icon {
        position: absolute;
        width: 0.14rem;
        height: 0.14rem;
        top: 50%;
        transform: translateY(-50%);
        left: -0.21rem;
        ::v-deep {
          path {
            fill: #999999;
          }
        }
      }
      .tactics-list {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        .tactic {
          width: 0.6rem;
          height: 0.24rem;
          background: #ffffff;
          border-radius: 4px;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 0.12rem;
          color: #b3b3b3;
          &.ok {
            color: #333;
          }
        }
      }
      .books-list {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        .book {
          width: 0.6rem;
          height: 0.24rem;
          background: #ffffff;
          border-radius: 4px;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 0.12rem;
          color: #b3b3b3;
          &.ok {
            color: #333;
          }
        }
      }
    }
  }
  input {
    height: 0.14rem;
    background: #ffffff;
    border-radius: 4px;
    margin-bottom: 0.1rem;
    width: calc(100% - 0.22rem);
    resize: none;
    border: none;
    padding: 0.08rem 0.11rem;
    font-size: 0.12rem;
    line-height: 0.17rem;
    color: #333;
    &::placeholder {
      color: #b3b3b3;
    }
  }
  textarea {
    height: 0.64rem;
    background: #ffffff;
    border-radius: 4px;
    width: calc(100% - 0.22rem);
    resize: none;
    border: none;
    padding: 0.08rem 0.11rem;
    font-size: 0.12rem;
    line-height: 0.17rem;
    color: #333;
    &::placeholder {
      color: #b3b3b3;
    }
  }
}
</style>
